-
Notifications
You must be signed in to change notification settings - Fork 45
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issue 27 - Calendar component #219
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
precisamos de um story para cada componente criado nessa tarefa
src/components/Button/index.scss
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pq esse CSS foi alterado?
src/styles/colors.scss
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As alteraçòes de cores tao certas aqui?
O Gray
é Gray
mesmo, nào é Grey
@@ -0,0 +1,219 @@ | |||
import { Component } from 'pet-dex-utilities'; | |||
import './index.scss'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Importar o css depois dos componentes
@@ -0,0 +1,219 @@ | |||
import { Component } from 'pet-dex-utilities'; | |||
import './index.scss'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Importar o css depois dos componentes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Lembre-se, inicialmente esse componente foi pensado para usar o componente de sliding internamente, então pode ser interessante fginalizar o slider antes de iniciar esse
import { listenBreakpoint } from '../../../../utils/breakpoints/breakpoints'; | ||
import DateButton from '../DateButton'; | ||
|
||
const events = ['changeMonth', 'changeYear']; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mudar o name pattern dos eventos
let handleTouchStart; | ||
let handleTouchMove; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remover as variaveis
handleTouchStart = (event) => { | ||
startTouch = selector.isDesktop | ||
? event.touches[0].clientY | ||
: event.touches[0].clientX; | ||
}; | ||
|
||
handleTouchMove = (event) => { | ||
event.preventDefault(); | ||
const currentTouch = selector.isDesktop | ||
? event.touches[0].clientY | ||
: event.touches[0].clientX; | ||
let move = 0; | ||
const moveRange = 20; | ||
move = currentTouch - startTouch; | ||
|
||
if (Math.abs(move) > moveRange) { | ||
const isSlideNext = move < 0; | ||
const nextYear = +selector.dates[3].children[0].innerText; | ||
const prevYear = +selector.dates[1].children[0].innerText; | ||
const nextMonth = monthsBR.indexOf( | ||
selector.dates[3].children[0].innerText, | ||
); | ||
const prevMonth = monthsBR.indexOf( | ||
selector.dates[1].children[0].innerText, | ||
); | ||
if (isSlideNext && selector.isYear) selector.setYear(nextYear); | ||
if (!isSlideNext && selector.isYear) selector.setYear(prevYear); | ||
if (isSlideNext && !selector.isYear) selector.setMonth(nextMonth); | ||
if (!isSlideNext && !selector.isYear) selector.setMonth(prevMonth); | ||
startTouch = currentTouch; | ||
} | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Toda essa parte do touchstart e touchmove deveria ser feita com o módulo atual de swipe, haviamos permitido deixar assim por enquanto pq a funcionalidade que precisavamos nao havia no modulo. Agora que será remanejado vamos revisitar isso e tentar usar o modulo de swipping.
selector.dateSelector.addEventListener('touchmove', handleTouchMove); | ||
} | ||
|
||
let handleScroll; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remover a variavel
function scrollModal(selector) { | ||
const $dateSelector = selector.dateSelector; | ||
|
||
handleScroll = (event) => { | ||
event.preventDefault(); | ||
const isScrollNext = event.deltaY > 0; | ||
|
||
if (selector.isYear) { | ||
const nextYear = +selector.dates[3].children[0].innerText; | ||
const prevYear = +selector.dates[1].children[0].innerText; | ||
const newYear = isScrollNext ? nextYear : prevYear; | ||
selector.setYear(newYear); | ||
} else { | ||
const nextMonth = monthsBR.indexOf( | ||
selector.dates[3].children[0].innerText, | ||
); | ||
const prevMonth = monthsBR.indexOf( | ||
selector.dates[1].children[0].innerText, | ||
); | ||
const newMonth = isScrollNext ? nextMonth : prevMonth; | ||
selector.setMonth(newMonth); | ||
} | ||
}; | ||
|
||
$dateSelector.addEventListener('wheel', handleScroll); | ||
addTouchEvents(selector); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Isso aqui seria removido usando o slider
this.dateClickHandle = (index) => () => { | ||
if (this.isYear) { | ||
this.setYear(this.dateArray[index]); | ||
} else { | ||
this.setMonth(monthsBR.indexOf(this.dateArray[index])); | ||
} | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Renomear o método
setTimeout(() => { | ||
this.date.scrollIntoView({ | ||
behavior: 'instant', | ||
block: 'center', | ||
inline: 'center', | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Estranho isso existir x.x
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Acredito que tudo que ta feito aqui poderia ser dividido em mais funcionalidades, arquivos e funções
setMonth(newMonth) { | ||
for (let i = 0; i < this.dateArray.length; i += 1) { | ||
const index = (newMonth - (2 - i) + 12) % 12; | ||
this.dateArray[i] = monthsBR[index]; | ||
} | ||
|
||
this.dateArray.forEach((item, index) => { | ||
this.dates[index].children[0].innerText = item; | ||
}); | ||
|
||
this.date.scrollIntoView({ | ||
behavior: 'instant', | ||
block: 'center', | ||
inline: 'center', | ||
}); | ||
|
||
this.emit('changeMonth', newMonth); | ||
}, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Acredito que essa função ta complexa demais pra só trocar o mes
setYear(newYear) { | ||
for (let i = 0; i < this.dateArray.length; i += 1) { | ||
this.dateArray[i] = newYear - (2 - i); | ||
} | ||
|
||
this.dateArray.forEach((item, index) => { | ||
this.dates[index].children[0].innerText = item; | ||
}); | ||
|
||
this.date.scrollIntoView({ | ||
behavior: 'instant', | ||
block: 'center', | ||
inline: 'center', | ||
}); | ||
|
||
this.emit('changeYear', newYear); | ||
}, | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Acredito que essa funcao ta complexa demais pra so trocar o ano
Closes #27
Feature
Criação do componente de calendário
Visual evidences 🖼️![image](https://private-user-images.githubusercontent.com/134434652/328997796-fe99ceec-5cfb-4982-920a-012509d30a41.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwMjk4NjIsIm5iZiI6MTcyNTAyOTU2MiwicGF0aCI6Ii8xMzQ0MzQ2NTIvMzI4OTk3Nzk2LWZlOTljZWVjLTVjZmItNDk4Mi05MjBhLTAxMjUwOWQzMGE0MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgzMFQxNDUyNDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wZWU4YzY2NmY3OTIyZmI0ZWYxOWU3Yzc0MGUxNmIyYTdjNWMxNjM5MDU5MGFkODI2Yzk2NzA3ZmUyMjU2ZmIwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.CkairXgWT52RpZ83ScTq50cPJjh_0Ldeyl3Iq54EhhU)
calendar_component.mp4
Checklist
Additional info
Componente já estava criado mas tem alguns comentários do outro PR para resolver, eu resolvi alguns e abri esse PR para ser mais fácil de gerenciar os comentários. As cores não estão 100% certas, estou esperando a resposta do Desiger.